<template>
	<view class="content">
		<view class="top">
			<view class="search">
				<view class="search-input">
					<text class="yzb yzb-search"></text>
					<input class="text-normal" type="text" :value="searchValue" :placeholder="placeholder" @input="searchInput" />
				</view>
				<view class="btn-cancel" @click="cancelSearch">清空</view>
			</view>
		</view>
		<view class="body">
			<yzbClassification
				ref="yzb"
				:index="index"
				:selectedColor="color"
				:type1LineHeight="lineheight1"
				:type1Size="size1"
				:type2Size="size2"
				:type3Size="size3"
				:type1Height="heigth1"
				@selectType="select"
			></yzbClassification>
		</view>
	</view>
</template>

<script>
import yzbClassification from '@/components/yzb/yzb-classification.vue';
export default {
	components: {
		yzbClassification
	},
	data() {
		return {
			types: [],
			newTypes:[],
			list:[],
			index: 0,
			color: '#007aff',
			size1: '12px',
			size2: '14px',
			size3: '10px',
			heigth1: '90rpx',
			lineheight1: '90rpx',
			// type11: []
			height:"0",
			
			searchValue: '',
			placeholder: '请输入关键词',
		};
	},
	onLoad() {
		this.getTypes();
	},
	
	onReady() {
		// let windowHeight = uni.getSystemInfoSync().windowHeight;
		// this.height = windowHeight - uni.upx2px(90);
	},
	
	methods: {
		async getTypes() {
			this.types = await this.$apis.getPostList();
			this.list=JSON.parse(JSON.stringify(this.types));
			this.$refs.yzb.init(this.list);
		},

		select(n1, n2, n3) {
			console.log('点击传来的值为', n1, n2, n3);
			console.log('点击的值为', this.list[n1].child[n2].child[n3].name);
			this.$mPage.prePage().selectPost = this.list[n1].child[n2].child[n3];
			uni.navigateBack({
				delta:1
			})
		},
		
		searchInput(e) {
			this.searchValue = e.detail.value;
			console.log('searchInput', this.searchValue);
			if (this.searchValue) {
				this.typeSearch(this.searchValue);
			} else {
				this.cancelSearch();
			}
		},
		// 取消搜索
		cancelSearch() {
			this.searchValue = '';
			this.list=JSON.parse(JSON.stringify(this.types));
			this.$refs.yzb.init(this.list);
		},
		
		typeSearch(keyword){
			let newTypes=[];
			for(let i=0;i<this.types.length;i++){
				if (this.types[i].name.toLowerCase().indexOf(keyword.toLowerCase()) != -1) {
					newTypes.push(this.types[i]);
				}else{
					//判断下一级
					if(this.types[i].child.length==0){
						continue;
					}
					for(let j=0;j<this.types[i].child.length;j++){
						if (this.types[i].child[j].name.toLowerCase().indexOf(keyword.toLowerCase()) != -1) {
							let type=JSON.parse(JSON.stringify(this.types[i]));
							let child=JSON.parse(JSON.stringify(this.types[i].child[j]));
							// type.child=[];
							// type.child.push(child);
							// newTypes.push(type);
							//判断一级是否已存在
							let t=-1;
							for(let m=0;m<newTypes.length;m++){
								if(newTypes[m].name == type.name){
									t=m;
								}
							}
							if(t!=-1){
								newTypes[t].child.push(child);
							}else{
								type.child=[];
								type.child.push(child);
								newTypes.push(type);
							}
						}else{
							//判断第三级
							if(this.types[i].child[j].child.length==0){
								console.log("跳过");
								continue;
							}
							for(let k=0;k<this.types[i].child[j].child.length;k++){
								if (this.types[i].child[j].child[k].name.toLowerCase().indexOf(keyword.toLowerCase()) != -1) {
									let type=JSON.parse(JSON.stringify(this.types[i]));
									let child1=JSON.parse(JSON.stringify(this.types[i].child[j]));
									let child2=JSON.parse(JSON.stringify(this.types[i].child[j].child[k]));
									child1.child=[];
									child1.child.push(child2);
									//判断一级是否已存在
									let t=-1;
									for(let m=0;m<newTypes.length;m++){
										if(newTypes[m].name == type.name){
											t=m;
										}
									}
									if(t!=-1){
										newTypes[t].child.push(child1);
									}else{
										type.child=[];
										type.child.push(child1);
										newTypes.push(type);
									}
								}else{
								}
							}
						}
					}
				}
			}
			this.list=newTypes;
			this.$refs.yzb.init(this.list);
		},
		
	}
};
</script>

<style lang="scss">
	.top {
		width: 100%;
		// height: 180upx;
		position: fixed;
		/* #ifdef H5 */
		top: 44px;
		/* #endif */
		/* #ifndef H5 */
		top: 0;
		/* #endif */
		z-index: 98;
		display: flex;
		flex-direction: column;
	}
	
	.search {
		width: 100%;
		display: flex;
		height: 90upx;
		z-index: 999;
		flex-direction: row;
		background-color: $main-color;
		color: #ffffff;
		align-items: center;
		justify-content: center;
		.yzb-search {
			color: $font-color-999;
			font-size: $uni-font-size-base;
			margin: 0 15upx;
			margin-top: 8upx;
		}
		.search-input {
			width: 77%;
			height: 65upx;
			border-radius: 50upx;
			display: flex;
			flex-direction: row;
			background-color: #ffffff;
			align-items: center;
		}
		.search-input image {
			width: 35upx;
			height: 35upx;
			margin-right: 10upx;
		}
		.search-input input {
			width: 65%;
			font-size: 28upx;
			color: $font-color-333;
		}
	
		.btn-search {
			margin-left: 20upx;
		}
	
		.btn-cancel {
			margin-left: 20upx;
		}
	}
	
	.body{
		width: 100%;
		padding-top: 90upx;
	}
</style>
